<template>
    <div class="capital-wrap">
        <div class="condition-wrap flex-hor-layout">
            <div class="item">
                <div class="title">合约</div>
                <el-select v-model="condition.contract"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in contractOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>

            <div class="item">
                <div class="title">类型</div>
                <el-select v-model="condition.type"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>

            <div class="item">
                <div class="title">方向</div>
                <el-select v-model="condition.direction"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in directionOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>

            <div class="item">
                <div class="title">按时间</div>
                <el-select v-model="condition.date"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in dateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>

            <div class="item">
                <div class="title">&nbsp;</div>
                <el-select v-model="condition.date"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in dateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <div class="title"></div>
                <div>--</div>
            </div>
            <div class="item">
                <div class="title"></div>
                <el-select v-model="condition.date"
                    class="black-select my-select"
                    popper-class="black-dropdown my-dropdown"
                    placeholder="请选择">
                    <el-option
                        v-for="item in dateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>
            </div>

            <div class="item">
                <div class="title"></div>
                <button class="btn query-btn borderless" @click="updateData">查询</button>
            </div>
        </div>
        <el-table
            :data="tableData"
            class="my-table"
            row-class-name="table-row">
            <el-table-column
                label="合约">
                <template slot-scope="scope">
                    <span class="icon empty"
                    :class='{"more": scope.row.long}'>{{scope.row.long ? '多':'空'}}
                    </span> {{getCurPaireObj.label}}  <span class="blue">{{scope.row.leverage}}X</span>
                </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="类型">
                <template slot-scope="scope" :class='{"open": scope.row.open}'>
                    {{scope.row.open ? '开仓' : '平仓'}}
                </template>
            </el-table-column>
            <el-table-column
                prop="openPrice"
                label="金额">
            </el-table-column>
            <el-table-column
                prop="size"
                label="币种">
            </el-table-column>
            <el-table-column
                prop=""
                label="时间">
                --
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
    name: 'Home',
    components: {
    },
    data() {
        return {
            tableData: [],
            contractOptions: [
                {label: '全部', value: 'all'}
            ],
            typeOptions: [
                {label: '全部', value: 'all'}
            ],
            directionOptions: [
                {label: '全部', value: 'all'}
            ],
            dateOptions: [
                {label: '全部', value: 'all'}
            ],
            condition: {
                contract: 'all',
                type: 'all',
                direction: 'all',
                date: 'all',
                start: 'all',
                end: 'all'
            }
        }
    },
    computed: {
      ...mapGetters([
      ])
    },
    watch: {
    },
    created() {
        for (let index = 0; index < 3; index++) {
            this.tableData.push({
                key: 1,
                long: index % 2===1
            })
        }
    },
    mounted() {

    },
    methods:{
        updateData(){
            this.tableData = []
            for (let index = 0; index < Math.random() * 10000 % 10; index++) {
                this.tableData.push({
                    key: 1,
                    long: index % 2===1
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
